<!doctype html>
<html lang="cn">
<head>
    <meta charset="UTF-8">
    <meta name="viewport"
          content="width=device-width, user-scalable=no, initial-scale=1.0, maximum-scale=1.0, minimum-scale=1.0">
    <meta http-equiv="X-UA-Compatible" content="ie=edge">
    <!--<title>Document</title>-->
    <link rel="stylesheet" href="/static/app/lib/iconfont/iconfont.css">
    <link rel="stylesheet" href="/static/app/css/style.css">
    <script src="/static/app/lib/zy.rem.js"></script>
    <script src="/static/app/lib/jquery1.12.3.min.js"></script>
    <script src="/static/app/js/base.js"></script>
    <script src="/static/layer/layer.min.js"></script>
</head>
<style>
    .sb-info .sb-name {
        font-size: .2rem;
        color: #4c4c4c;
    }
    .pick {
        background: white;
        border-radius: .04rem;
        margin-top: 0.2rem;
    }
    .center {
        padding: 0.1rem 0.3rem 0.3rem 0.3rem;
    }
    .hua{
        display:none;
        border: 0.02rem solid #ccc;
        position: absolute;
        top: 0.8rem;
        left: 5.5rem;
        z-index: 10;
        /*opacity:0.5;*/
        border-radius: 0.1rem;
        float:right
    }

</style>
<body>
<div class="header">
    <div></div>
    <div>我的设备</div>
    <div><a href="{:url('Core/add')}" class="head-btn iconfont">&#xe601;</a></div>
</div>

<div class="center" style="height: 9rem;">
    {foreach name="data" key="key" item="v"}
    <div class="pick">
        <div class="top">
            <!--<i class="iconfont icon-dianliang"></i>-->

            <div class="dia">{notempty name="$v.data_info"}{$v.data_info['battery']}%<img src="/static/app/img/dian{$v.data_info['img']}.png"/>{else}未激活{/notempty}</div>
            <div class="sb-cont">
                <img src="{if $v.head!=null}{$v.head}{else}/static/app/img/sb.png{/if}"/>
            </div>
            <div class="sb-info" style="padding: .5rem 0 0;">
                <div class="sb-name">名&nbsp;&nbsp;&nbsp;&nbsp;称：{$v.nickname}</div>
                <div class="sb-name">设备号：{$v.name}</div>
                {if $v.expire_time<=time()}
                <div class="cb-na"><i class="iconfont">&#xe61a;</i>已过期</div>
                {else}
                {notempty name="$v.data_info"}
                {if $v.data_info.online==0}
                <div class="cb-na"><i class="iconfont">&#xe61a;</i>已离线</div>
                {/if}
                {/notempty}
                {/if}
                <img class="luyin" src="/static/app/img/luyin.png" style="height: 0.45rem;position: absolute;top: 1.3rem;left: 6rem;" onclick="luyin(this,{$v.name},{$v.expire_time})">
            </div>

        </div>
        <div class="but" style="position: relative">
            <a href="{:url('Map/mapdata')}?imei={$v.name}"><i class="iconfont">&#xe627;</i>地图</a>
            <a href="{:url('Core/devedit')}?imei={$v.name}"><i class="iconfont">&#xe614;</i>设备管理</a>

            <a href="{:url('Index/luyin_view')}?imei={$v.name}"><img src="/static/app/img/chakan.png" style="position: relative;height: 0.37rem;top: 0.09rem;">查看录音</a>
            <a onclick="anui(this)"><img src="/static/app/img/dianhua.png" style="position: relative;height: 0.5rem;top: 0.15rem;">电话</a>
            <div class="hua" style="  background-color: rgba(37, 37, 37, 0.62);">
                <div style="color: #fff;padding:0 0.1rem;font-size: 0.25rem;" onclick="dianhua(this,{$v.name},{$v.expire_time},0)">单向听音</div>
                <div  style="color: #fff;padding:0 0.1rem;font-size: 0.25rem;"onclick="dianhua(this,{$v.name},{$v.expire_time},0)">双向通话</div>
            </div>

</div>
</div>

    {/foreach}
</div>

{include file='public:bottom'}
</body>
<script>
    //显示隐藏
    function anui(obj) {
        if(  $(obj).next('.hua').css('display')=='none'){
            $(obj).next('.hua').css('display','block')
        }else {
            $(obj).next('.hua').css('display','none')
        }

    }
    //录音
    function luyin(obj,imei,expire_time) {
        $.ajax({
            url:"{:url('Index/luyin')}",
            type:'POST',
            data:{
                imei:imei,
                expire_time:expire_time
            },
            dataType: 'json',
            success:function(res){
                if (res.code != 200) {
                    layer.msg(res.result.msg, {shade: 0.5, time: 1000,icon: 2});
                    return false;
                }
                layer.msg(res.result.msg, {shade: 0.5, time: 800, icon: 1}, function(){
                    $(obj).attr('src','/static/app/img/luyin1.png')
                    setInterval(function working(){
                        $(obj).attr('src','/static/app/img/luyin.png')
                    },20000);
                });
            }
        });
    }
    //拨打电话
    function dianhua(obj,imei,expire_time,type) {
        $(obj).parent('.hua').css('display','none'); //隐藏下拉框
        $.ajax({
            url:"{:url('Index/dianhua')}",
            type:'POST',
            data:{
                imei:imei,
                type:type,
                expire_time:expire_time
            },
            dataType: 'json',
            success:function(res){
                if (res.code != 200) {
                    layer.msg(res.result.msg, {shade: 0.5, time: 1000,icon: 2});
                    return false;
                }
                layer.msg(res.result.msg, {shade: 0.5, time: 800, icon: 1}, function(){
                    // window.location.href="{:url('index')}";
                    window.location.reload();
                });
            }
        });
    }
</script>
</html>